import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Button,
    Image,
    ScrollView,
} from 'react-native';
import { connect } from 'react-redux';
import HeaderTime from '../../components/CountDown/header.time';
import ShowHistory from '../../components/ShowHistory/show.history';
import HeaderBar from '../../common/headerBar';
import { Variable } from '../../variables';
import DeviceRn from '../../components/Tools/device';


let DevWH = DeviceRn().getWidHig();
class HomeScreen extends Component {

    static params = {
        Image: require('../../assets/images/home.png'),
        msg: '时彩',
        header: null
    };
    static navigationOptions = ({ navigation, screenProps }) => HeaderBar(screenProps, HomeScreen.params)

    constructor(props) {
        super(props);
        this.state = {
            dlt_expect: '',
            dlt_opencode: '',
            dlt_opentime: '',
            qxc_expect: '',
            qxc_opencode: '',
            qxc_opentime: '',
            pl3_expect: '',
            pl3_opencode: '',
            pl3_opentime: '',
            pl5_expect: '',
            pl5_opencode: '',
            pl5_opentime: '',

            dlt_gonggao: '18005',
            qxc_gonggao: '18004',
            pl3_gonggao: '18010',
            pl5_gonggao: '18010',
            
            // dlt: { expect: '', opencode: '', opentime: '' },
            // qxc: { expect: '', opencode: '', opentime: '' },
            // pl3: { expect: '', opencode: '', opentime: '' },
            // pl5: { expect: '', opencode: '', opentime: '' },


        };

    }
    componentWillReceiveProps(nextProps) {
        this.netInfo = nextProps.status;
    }
    componentWillMount() {
        fetch(`http://f.apiplus.net/cqssc.json`, {
            method: "GET",
        })
        .then(res => res.json())
        .then((res) => {
            let data = res.data[0];
            this.setState({dlt_expect: data.expect})
            this.setState({dlt_opentime: data.opentime})
            this.setState({dlt_opencode: data.opencode})
            this.setState({dlt_gonggao: data.expect.substring(2)})
            
            // let dlt = Object.assign({},this.state.dlt)
            // dlt.expect = data.expect
            // dlt.opencode = data.opencode
            // dlt.opentime = data.opentime
            // this.setState({dlt})
        })

        fetch(`http://f.apiplus.net/qxc.json`, {
            method: "GET",
        })
        .then(res => res.json())
        .then((res) => {
            let data = res.data[0];
            this.setState({qxc_expect: data.expect})
            this.setState({qxc_opentime: data.opentime})
            this.setState({qxc_opencode: data.opencode})
            this.setState({qxc_gonggao: data.expect.substring(2)})
        })

        fetch(`http://f.apiplus.net/pl3.json`, {
            method: "GET",
        })
        .then(res => res.json())
        .then((res) => {
            let data = res.data[0];
            this.setState({pl3_expect: data.expect})
            this.setState({pl3_opentime: data.opentime})
            this.setState({pl3_opencode: data.opencode})
            this.setState({pl3_gonggao: data.expect.substring(2)})
            
        })
        
        fetch(`http://f.apiplus.net/pl5.json`, {
            method: "GET",
        })
        .then(res => res.json())
        .then((res) => {
            let data = res.data[0];
            this.setState({pl5_expect: data.expect})
            this.setState({pl5_opentime: data.opentime})
            this.setState({pl5_opencode: data.opencode})
            this.setState({pl5_gonggao: data.expect.substring(2)})
            
        })
    }

    _renderTXItem(kind='',expect='',endTime=''){
        return(
            <View style={[styles.fd_row, styles.tx_border]}>
                <Text style={{ flex: 1 }}>{kind}</Text>
                <Text style={{ flex: 1, color: '#aaa' }}>第{expect}期</Text>
                <Text style={{ flex: 1.5 }}>截止日期 {endTime}</Text>
            </View>
        )
    }
    render() {
        let dltOpencode = []
        let qxcOpencode = []
        let pl3Opencode = []
        let pl5Opencode = []
        if(this.state.dlt_opencode){
            dltOpencode = this.state.dlt_opencode.split(',')
            // let a = dltOpencode[4].split('+')
            // dltOpencode.splice(4,1,a[0],a[1])
        }
        if(this.state.qxc_opencode){
            qxcOpencode = this.state.qxc_opencode.split(',')
        }
        if(this.state.pl3_opencode){
            pl3Opencode = this.state.pl3_opencode.split(',')
        }
        if(this.state.pl5_opencode){
            pl5Opencode = this.state.pl5_opencode.split(',')
        }
        
        return (
            <View style={styles.home}>
                {/* <HeaderTime netInfo={this.netInfo}></HeaderTime> */}
                <Text style={styles.title}>数字时彩</Text>
                <ScrollView>
                    {/* <Image source={require('../../assets/images/nav1.jpg')} style={{ height: 200 }} /> */}
                    <View style={styles.kj}>
                        <Text style={styles.kj_text}>开奖信息</Text>
                    </View>
                    <View style={styles.container}>
                        {/* <ShowHistory theme={this.props.screenProps} netInfo={this.netInfo}></ShowHistory> */}
                        <View style={styles.logo_left}>
                            <Image style={[styles.icon_img]} source={require('../../assets/images/icon1.png')} />
                            <Text>{this.state.dlt_expect}</Text>
                        </View>
                        <View style={{ flex: 2, marginLeft: 10 }}>
                            <Text>开奖日期 {this.state.dlt_opentime}</Text>
                            {/* <View style={styles.fd_row}>
                                <Text style={{ flex: 2, textAlign: 'center', color: '#bbb' }}>前区</Text>
                                <Text style={{ flex: .8, textAlign: 'left', color: '#bbb' }}>后区</Text>
                            </View> */}
                            <View style={styles.fd_row}>
                                {/* <View style={{ width: 1, height: 20, borderWidth: 1, borderColor: '#aaa', top: 2, margin: 2 }}></View> */}
                                {/* {dltOpencode.map(code =>{
                                    return <Text style={[styles.num_item, styles.cacle]}>{code}</Text>
                                })} */}
                                {dltOpencode.map((code,index) => {
                                    if(index>=0&&index<5){
                                        return <Text style={[styles.num_item, styles.cacle]}>{code}</Text>
                                    }else {
                                        return <Text style={[styles.num_item, styles.cacle, {backgroundColor: '#d80836'}]}>{code}</Text>
                                    }
                                })}
                            </View>
                            
                            {/* <View style={[styles.fd_row, { margin: 10 }]}>
                                <View style={{ marginLeft: 10 }}>
                                    <Button
                                        onPress={() => this.gongGao('gonggao','http://m.sporttery.cn/wap/digital/lottery_number.php?type=1&issue='+this.state.dlt_gonggao)}
                                        title=" 开奖公告 " />
                                </View>
                                <View style={{ marginLeft: 10 }}>
                                    <Button
                                        onPress={() => this.seeOld('seeold','digital')}
                                        title=" 查看往期 " />
                                </View>
                            </View> */}
                        </View>
                    </View>

                    <View style={styles.container}>
                        {/* <ShowHistory theme={this.props.screenProps} netInfo={this.netInfo}></ShowHistory> */}
                        <View style={styles.logo_left}>
                            <Image style={styles.icon_img} source={require('../../assets/images/icon2.png')} />
                            <Text>{this.state.qxc_expect}</Text>
                        </View>
                        <View style={{ flex: 2, marginLeft: 10 }}>
                            <Text>开奖日期 {this.state.qxc_opentime}</Text>
                            <View style={styles.fd_row}>
                                {qxcOpencode.map(code =>{
                                    return <Text style={[styles.num_item,styles.cacle, styles.Qcacle]}>{code}</Text>
                                })}
                            </View>
                            
                            <View style={[styles.fd_row, { margin: 10 }]}>
                                <View style={{ marginLeft: 10 }}>
                                    <Button
                                        onPress={() => this.gongGao('gonggao','http://m.sporttery.cn/wap/digital/lottery_number.php?type=2&issue='+this.state.qxc_gonggao)}
                                        title=" 开奖公告 " />
                                </View>
                                <View style={{ marginLeft: 10 }}>
                                    <Button
                                        onPress={() => this.seeOld('seeold','qixing')}
                                        title=" 查看往期 " />
                                </View>
                            </View>
                        </View>
                    </View>

                    <View style={styles.container}>
                        {/* <ShowHistory theme={this.props.screenProps} netInfo={this.netInfo}></ShowHistory> */}
                        <View style={styles.logo_left}>
                            <Image style={styles.icon_img} source={require('../../assets/images/icon3.png')} />
                            <Text>{this.state.pl3_expect}</Text>
                        </View>
                        <View style={{ flex: 2, marginLeft: 10 }}>
                            <Text>开奖日期 {this.state.pl3_opentime}</Text>
                            <View style={styles.fd_row}>
                                {pl3Opencode.map(code =>{
                                    return <Text style={[styles.num_item,styles.cacle, styles.Scacle]}>{code}</Text>
                                })}
                            </View>
                            <View style={[styles.fd_row, { margin: 10 }]}>
                                <View style={{ marginLeft: 10 }}>
                                    <Button
                                        onPress={() => this.gongGao('gonggao','http://m.sporttery.cn/wap/digital/lottery_number.php?type=5&issue='+this.state.pl3_gonggao)}
                                        title=" 开奖公告 " />
                                </View>
                                <View style={{ marginLeft: 10 }}>
                                    <Button
                                        onPress={() => this.seeOld('seeold','pais')}
                                        title=" 查看往期 " />
                                </View>
                            </View>
                        </View>
                    </View>

                    <View style={styles.container}>
                        {/* <ShowHistory theme={this.props.screenProps} netInfo={this.netInfo}></ShowHistory> */}
                        <View style={styles.logo_left}>
                            <Image style={styles.icon_img} source={require('../../assets/images/icon4.png')} />
                            <Text>{this.state.pl5_expect}</Text>
                        </View>
                        <View style={{ flex: 2, marginLeft: 10 }}>
                            <Text>开奖日期 {this.state.pl5_opentime}</Text>
                            <View style={styles.fd_row}>
                                {pl5Opencode.map(code =>{
                                    return <Text style={[styles.num_item,styles.cacle, styles.Wcacle]}>{code}</Text>
                                })}
                            </View>
                            <View style={[styles.fd_row, { margin: 10 }]}>
                                <View style={{ marginLeft: 10 }}>
                                    <Button
                                        onPress={() => this.gongGao('gonggao','http://m.sporttery.cn/wap/digital/lottery_number.php?type=6&issue='+this.state.pl5_gonggao)}
                                        title=" 开奖公告 " />
                                </View>
                                <View style={{ marginLeft: 10 }}>
                                    <Button
                                        onPress={() => this.seeOld('seeold','paiw')}
                                        title=" 查看往期 " />
                                </View>
                            </View>
                        </View>
                    </View>
                    <View style={[styles.kj]}>
                        <Text style={styles.kj_text}>购彩提醒</Text>
                    </View>
                    <View>
                        {this._renderTXItem('超级大乐透','18005','01-10 20:00')}
                        {this._renderTXItem('七彩星','18005','01-12 20:00')}
                        {this._renderTXItem('排列3','18010','01-10 20:00')}
                        {this._renderTXItem('排列5','18010','01-10 20:00')}
                        
                    </View>
                </ScrollView>

            </View>
        );
    }

   

    gongGao(wz, url) {
        let { navigate } = this.props.navigation;
        navigate(wz, {url: url});
     }
    seeOld(wz, kind) { 
        let { navigate } = this.props.navigation;
        navigate(wz, {kind: kind});
    }
}
mapStoreState = (store) => ({
    status: store.netInfo.status,
});
export default connect(mapStoreState)(HomeScreen);

const styles = StyleSheet.create({
    fd_row: {
        flexDirection: 'row'
    },
    home: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-start',
        backgroundColor: '#fff',
        marginVertical: 0
    },
    title: {
        fontSize: 16,
        fontWeight: '600',
        color: '#fff',
        backgroundColor: '#f19f49',
        padding: 20,
        width: DevWH.sW,
        textAlign: 'center',
    },
    kj: {
        position: 'relative',
        width: DevWH.sW,
        borderBottomWidth: 1,
        borderColor: '#f0f0f0',
        height: 36,
    }
    ,
    kj_text: {
        position: 'absolute',
        fontSize: 16,
        color: '#f00',
        paddingLeft: 15,
        top: 7,
    },
    container: {
        top: 0,
        flex: 1,
        width: DevWH.sW,
        justifyContent: 'center',
        alignItems: 'center',
        bottom: 46,
        borderWidth: 1,
        borderColor: '#f0f0f0',
        flexDirection: 'row',
    },
    logo_left: { 
        flex: 1,
        borderRightWidth: 1, 
        borderRightColor: '#f0f0f0',
        justifyContent: 'center', 
        alignItems: 'center' 
},
    icon_img: {
        width: 72,
        height: 100,
    },
    logo_num: {
        // flex: 1,
        // textAlign: 'center',
    },
    num_item: {
        textAlign: 'center',
        lineHeight: 24,
        width: 24,
        height: 24,
        fontSize: 16,
        overflow: 'hidden',
        margin: 3,
    },
    cacle: {
        color: '#fff',
        backgroundColor: '#f5a211',
        borderRadius: 12,
        borderWidth: 1,
        borderColor: '#f5a211',
    },
    Bcacle: {
        color: '#fff',
        backgroundColor: '#f57711',
        borderRadius: 12,
        borderWidth: 1,
        borderColor: '#f57711',
    },
    Qcacle: {
        backgroundColor: '#e52c5c',
        borderColor: '#e52c5c'
    },
    Scacle: {
        backgroundColor: '#5cbee6',
        borderColor: '#5cbee6'
    },
    Wcacle: {
        backgroundColor: '#f7ad00',
        borderColor: '#f7ad00'
    },
    tx_border: {
        padding: 15,
        borderBottomWidth: .5,
        borderBottomColor: '#f0f0f0',
    },
});